import { useEcharts } from "@/hooks/useEcharts";
import * as echarts from "echarts";
import "echarts-liquidfill";
export default defineComponent({
	emits: [],
	setup(props, { expose }) {
		const echartsRef = ref<HTMLElement>();
		let myChart: echarts.ECharts;
		onMounted(() => {
			myChart = echarts.init(echartsRef.value as HTMLElement);
			window.addEventListener("resize", echartsResize);
			let value = 0.5;
			let data = [value, value, value];
			let option: echarts.EChartsCoreOption = {
				title: [
					{
						text: 0 + "%",
						left: "50%",
						top: "40%",
						textAlign: "center",
						textStyle: {
							fontSize: "35",
							fontWeight: "700",
							color: "#ddd",
							textAlign: "center",
							textBorderColor: "rgba(0, 0, 0, 0)",
							textShadowColor: "#fff",
							textShadowBlur: "0",
							textShadowOffsetX: 0,
							textShadowOffsetY: 1
						}
					},
					{
						text: "合格率",
						left: "50%",
						bottom: "0",
						textAlign: "center",
						textStyle: {
							fontSize: "14",
							color: "#97adbb",
							textAlign: "center",
							textBorderColor: "rgba(0, 0, 0, 0)",
							textShadowColor: "#fff",
							textShadowBlur: "0",
							textShadowOffsetX: 0,
							textShadowOffsetY: 1
						}
					}
				],
				series: [
					{
						type: "liquidFill",
						radius: "60%",
						z: 6,
						center: ["50%", "50%"],
						color: [
							{
								type: "linear",
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [
									{
										offset: 1,
										color: "#0c8af8"
									},
									{
										offset: 0.5,
										color: "#0c8af8"
									},
									{
										offset: 0,
										color: "#90d3f0"
									}
								],
								globalCoord: false
							}
						],
						data: data,
						backgroundStyle: {
							borderWidth: 1,
							color: "transparent"
						},
						label: {
							formatter: ""
						},
						outline: {
							show: true,
							itemStyle: {
								borderWidth: 0
							},
							borderDistance: 0
						}
					},
					{
						name: "第二层", //用于中间间隔
						type: "pie",
						z: 3,
						radius: ["0%", "65%"],
						center: ["50%", "50%"],
						itemStyle: {
							label: {
								show: false
							}
						},
						data: [
							{
								value: 100,
								itemStyle: {
									color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
										{
											offset: 0,
											color: "#051843"
										},
										{
											offset: 1,
											color: "#051843"
										}
									])
								}
							},
							{
								value: 0,
								itemStyle: {
									color: "transparent"
								}
							}
						]
					},
					{
						name: "最外绿边边框",
						type: "pie",
						z: 1,
						radius: ["0%", "70%"],
						center: ["50%", "50%"],
						itemStyle: {
							label: {
								show: false
							}
						},
						data: [
							{
								value: 100,
								itemStyle: {
									color: "#0c8af8"
								}
							},
							{
								value: 0,
								itemStyle: {
									color: "transparent"
								}
							}
						]
					}
				]
			};
			useEcharts(myChart, option);
		});
		const echartsResize = () => {
			myChart && myChart.resize();
		};
		const loadData = () => {};
		expose({ loadData });
		return () => {
			return (
				<div class="workorder-chart h-full">
					<div class="block-title"></div>
					<div class="flex items-center justify-center" style="height:calc(100% - 45px)">
						<div ref={echartsRef} class="h-full flex-1 chart-left" style="margin-top:-15px"></div>
						<div class="h-full flex-1 inline-flex items-center justify-center chart-right">
							<div class="icon"></div>
							<div class="info">
								<div class="val">0</div>
								<div class="lebel">工单数量</div>
							</div>
						</div>
					</div>
				</div>
			);
		};
	}
});
